<template>
  <template v-if="!显示设置?.隐藏">
    <el-table-column align="center" :label="现标题" :prop="字段.名称" :width="成列宽(字段)" :sortable="!禁止排序">
      <template #default="{ row: 单项 }">
        <template v-if="编辑否 && !显示设置?.禁止编辑">
          <a单字段输入 :字段="字段" :单项="单项" :元件袋="元件袋" />
        </template>
        <!-- 非编辑状态👇 -->
        <template v-else>
          <!-- {{ 字段.名称 }} -->
          <template v-if="字段.类型 == em.字段类型.关联字段">
            <span>{{ 元件袋.取字段显示值(单项, 字段) }}</span>
          </template>
          <template v-else-if="字段.类型 == em.字段类型.time">
            {{ util.fmt时间到天(单项[字段.名称]) }}
          </template>
          <template v-else-if="字段.类型 == em.字段类型.图片">
            <el-image  preview-teleported style="width: 100px; height: 100px"
            :src="util.成url(单项[字段.名称])" fit="cover" />
          </template>
          <template v-else-if="字段.类型 == 'bool'">
            <!-- <el-checkbox v-model="单项[字段.名称]" disabled /> -->
            <div class="row flex-center">
              <q-toggle v-model="单项[字段.名称]" checked-icon="check" color="green" unchecked-icon="clear" disable />
            </div>
          </template>
          <template v-else-if="字段.类型 == em.字段类型.人民币">
            {{ util.现人民币_分转元(单项[字段.名称]) }}
          </template>
          <template v-else>
            <template v-if="字段.有链接">
              <el-button type="primary" link icon="link" @click="跳转详情(单项)">
                {{ 单项[字段.名称] }}
              </el-button>
            </template>
            <template v-else>
              {{ 单项[字段.名称] }}
            </template>
          </template>
        </template>
      </template>
    </el-table-column>
  </template>
</template>
<script setup lang="ts">
import * as em from '@/enums';
import * as util from 'amtf/utils';
import * as 元件util from 'amtf/api/元件util';
import { computed, inject, onBeforeMount, watch } from 'vue';
import a单字段输入 from '@/components/a单字段输入.vue';

// 泛型写法👇辣眼睛
const props = withDefaults(defineProps<{
  // list: list;
  详情_抽屉式?: 详情;
  元件袋: 元件袋;
  字段: 字段;
  父环境?: string;
  编辑否?: boolean;
  cfg?: {};
}>(),
  {
    编辑否: false,
    父环境: "主表",
  });
const { 元件袋, 详情_抽屉式, 字段, 父环境 } = props

function 要覆盖列暂时否(字段: 字段) {
  if (props.编辑否 || 字段.类型 == em.字段类型.关联字段) return true
  if (字段.类型 == em.字段类型.time) return true
}

import use缓存 from "@/hooks/use缓存"
const 缓存 = use缓存({ ...props.元件袋.a })

const 显示设置: 显示设置 = {}
if (字段.显示设置) Object.assign(显示设置, 字段.显示设置)
if (字段.显示设置_主表) Object.assign(显示设置, 字段.显示设置_主表)
switch (父环境) {
  case '独立详情':
    if (字段.显示设置_子表中_独立详情) Object.assign(显示设置, 字段.显示设置_子表中_独立详情)
    break;
  case '简化详情':
    if (字段.显示设置_子表中_简化详情) Object.assign(显示设置, 字段.显示设置_子表中_简化详情)
    break;
  case '父表内嵌':
    if (字段.显示设置_子表中_父表内嵌) Object.assign(显示设置, 字段.显示设置_子表中_父表内嵌)
    break;
}

function 成列宽(字段: 字段) {
  // const 字段集 = props.list.缓存.取字段集()
  const 字段集 = 缓存.取字段集()
  const 字段id = props.元件袋.成字段id(字段.名称)

  if (字段集[字段id]?.列宽) {
    return 字段集[字段id].列宽
  }
  if (显示设置?.宽度) {
    return 显示设置?.宽度
  } else if (字段.显示设置?.宽度) {
    // console.log(`字段.显示设置?.宽度 👉`,字段.显示设置?.宽度)
    return 字段.显示设置?.宽度
  }
  // if (字段.名称.includes('序号')) {
  //   return 55
  // }
  return 140
}

// const 字段hook = inject('字段hook')
const 字段hook = inject('字段hook', () => {
  console.warn('字段hook 未找到，使用默认值');
});
// const { 字段 } = props
const 现标题 = computed(() => {
  return 元件util.成标题(props, 字段hook, 字段)

  // let res
  // console.log(`字段hook 👉`, 字段hook)
  // console.log(`字段.名称 👉`,字段.名称)
  // if (字段hook[字段.名称]?.标题) {
  //   return 字段hook[字段.名称].标题
  // }
  // // if (路由.a.页面类型 == em.页面类型.详情) {
  // //   if (字段.详情标题) return 字段.详情标题
  // // }
  // res = 字段.标题 ? 字段.标题 : 字段.名称
  // return res
})

// watch(() => props.字段, (newValue, oldValue) => {
//   console.log(`props.字段 newValue 👉`,newValue)
// })

const 禁止排序 = computed(() => {
  if (显示设置?.禁止排序) {
    return true
  }
  return false
})

function 跳转详情(单项: 单项) {
  // 此处 偏偏 不能使用外部解构的😓
  const { 详情_抽屉式 } = props
  if (详情_抽屉式) {
    详情_抽屉式.初始化(单项)
  } else {
    元件袋.跳转单独详情页(单项)
  }
}


</script>
